<template>
	<view class="comment-content">
		<!-- <button class="add-button" @click="addPerson()">新增</button> -->
		<!-- <view class="cus-search-component" v-if="showSearch">
			<input confirm-type="search" focus v-model="dataParams.search_key" @blur="search()" placeholder="找人" />
			<button type="primary" @click="search()">搜索</button>
		</view> -->
		<cus-no-data v-if="isNoData"></cus-no-data>
		<scroll-view v-else scroll-y class="person-list" @scrolltolower="getPersonalInfo">
			<view v-for="(info,index1) in infos" :key="info" class="comment-content-item" :class="{'comment-content-item-last': index1 === infos.length-1}">
				<view :class="['personal-project-name',{'personal-project-name-first': index1 === 0}]">{{info.hard_name}}</view>
				<view v-for="(partner, index) in info.partner_list" :key="index">
					<view class="cus-image-text-col">
						<text class="cus-image-text-col1">{{partner.partner_name}}</text>
						<view @click="editPerson(partner.id,partner.type)">
							<text>{{partner.partner_name}}</text>
							<text>{{partner.position_name}}</text>
						</view>
						<view id="person-phone" v-if="partner.partner_mobile" @click="makePhone(partner.partner_name, partner.partner_mobile)">
							<uni-icon type="phone" size="18" color="#008ff3"></uni-icon>
							<text>{{partner.partner_mobile}}</text>
						</view>
					</view>
				</view>
				<view v-for="(manager, index) in info.manager_list" :key="index">
					<view class="cus-image-text-col">
						<text class="cus-image-text-col1">{{manager.manager}}</text>
						<view @click="editPerson(manager.id,manager.type)">
							<text>{{manager.manager}}</text>
							<text>{{manager.position_name}}</text>
						</view>
						<view id="person-phone" v-if="manager.manager_mobile" @click="makePhone(manager.manager, manager.manager_mobile)">
							<uni-icon type="phone" size="18" color="#008ff3"></uni-icon>
							<text>{{manager.manager_mobile}}</text>
						</view>
					</view>
				</view>
				<view v-for="(work, index) in info.work_list" :key="index">
					<view class="cus-image-text-col">
						<text class="cus-image-text-col1">{{work.head}}</text>
						<view @click="editPerson(work.id,work.type)">
							<text>{{work.head}}</text>
							<text>{{work.position_name}}</text>
							<!-- <text class="person-task">任务: {{work.work_name}}</text> -->
						</view>
						<view id="person-phone" v-if="work.head_mobile" @click="makePhone(work.head, work.head_mobile)">
							<uni-icon type="phone" size="18" color="#008ff3"></uni-icon>
							<text>{{work.head_mobile}}</text>
						</view>
					</view>
				</view>
				<view v-for="(worker, index) in info.worker_list" :key="index">
					<view class="cus-image-text-col">
						<text class="cus-image-text-col1">{{worker.worker}}</text>
						<view @click="editPerson(worker.id,worker.type)">
							<text>{{worker.worker}}</text>
							<text>{{worker.position_name}}</text>
							<!-- <text class="person-task">任务: {{worker.work_name}}</text> -->
						</view>
						<view id="person-phone" v-if="worker.worker_mobile" @click="makePhone(worker.worker, worker.worker_mobile)">
							<uni-icon type="phone" size="18" color="#008ff3"></uni-icon>
							<text>{{worker.worker_mobile}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- #ifdef MP-WEIXIN -->
		<uni-fab v-if="!isFromMain" :horizontal="horizontal" :vertical="vertical" uniIcon="plusempty" @longpress="fadlongpress" @onlyOne="addPerson()"></uni-fab>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infos: [],
				// showSearch: false,
				dataParams: {
					search_key: "",
					page_no: 1,
					page_size: 5,
					hard_id: ""
				},
				loadMore: true,
				isNoData: false,
				isFromMain: false, //是否从主入口进来的
				horizontal: 'left',
				vertical: 'bottom'
			}
		},
		onLoad(param) {
			if (param.id) {
				this.isFromMain = false
				this.dataParams.hard_id = param.id
			} else {
				//是从主入口进入
				this.isFromMain = true
				this.setAppBarButton()
			}
			this.getPersonalInfo()
		},
		onNavigationBarButtonTap() {
			//不是从主入口进去的，点击才有效果
			if (!this.isFromMain) {
				this.addPerson()
			}
		},
		methods: {
			fadlongpress() { // 悬浮按钮长按
				if (this.vertical === 'top') {
					this.vertical = 'bottom'
				} else {
					this.vertical = 'top'
				}
			},
			//从主入口进入的时候，增加按钮置为空
			setAppBarButton() {
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				// #ifdef APP-PLUS
				let currentWebview = page.$getAppWebview();
				let titleObj = currentWebview.getStyle().titleNView;
				if (!titleObj.buttons) {
					return;
				}
				titleObj.buttons[0].text = '';
				currentWebview.setStyle({
					titleNView: titleObj
				});
				// #endif
			},
			//获取列表信息
			getPersonalInfo() {
				if (!this.loadMore) return
				uni.showLoading({
					title: '',
					mask: true
				});
				this.$request({
					url: this.$store.state.baseUrl + '/lwj/app_hard_address_list',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: this.dataParams,
					success: res => {
						if (res.data.data.info.length === 0) {
							this.isNoData = true
						}
						if (res.data.data.info.length < this.dataParams.page_size) {
							this.loadMore = false
						}
						this.dataParams.page_no++
						this.infos.push(...res.data.data.info)
					},
					fail: () => {},
					complete: () => {
					}
				});
			},
			// search() {
			// 	this.dataParams.page_no =1
			// 	uni.showLoading({
			// 		title: '',
			// 		mask: true
			// 	});
			// 	uni.request({
			// 		url: this.$store.state.baseUrl + '/lwj/app_hard_address_list',
			// 		method: 'POST',
			// 		header: {
			// 			token: this.$store.state.token
			// 		},
			// 		data: this.dataParams,
			// 		success: res => {
			// 			if(res.data.data.info.length < this.dataParams.page_size) {
			// 				this.loadMore = false
			// 			}
			// 			this.infos = res.data.data.info
			// 			uni.hideLoading()
			// 		},
			// 		fail: () => {},
			// 		complete: () => {}
			// 	});
			// },
			makePhone(name, mobile) {
				uni.showModal({
					title: '拨打电话',
					content: '是否拨打电话给:' + name,
					showCancel: true,
					cancelText: '取消',
					confirmText: '拨打',
					success: res => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: mobile
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//跳转到新增页面
			addPerson() {
				uni.navigateTo({
					url: './personalManagerEdit?hard_id=' + this.dataParams.hard_id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//跳转到编辑页面
			editPerson(id, type) {
				uni.navigateTo({
					url: './personalManagerEdit?id=' + id + '&type=' + type + '&hard_id=' + this.dataParams.hard_id + '&isFromMain=' +
						this.isFromMain,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
	}
</script>

<style>
	.comment-content {
		background-color: #FFFFFF;
		height: 100%;
		width: 100%;
	}

	.personal-project-name {
		background-color: rgba(0, 0, 0, 0.1);
		padding: 16upx 40upx;
		margin-top: 40upx;
	}

	.personal-project-name-first {
		margin-top: 0;
	}

	.comment-content-item {
		background-color: #FFFFFF;
	}

	.comment-content-item-last {
		padding-bottom: 60upx;
	}

	.person-list {
		height: 100%;
	}

	.cus-image-text-col {
		padding: 40upx 40upx 0;
	}

	.person-task {
		font-size: 24upx;
	}

	#person-phone {
		display: flex;
		flex-direction: row;
		flex: 0;
	}

	#person-phone text:nth-child(2) {
		color: #008ff3;
		font-size: 30upx;
	}
</style>
